<template>
  <view class="container">
    <view class="title">找回密码</view>
    <view class="form">
      <view class="form-group">
        <label class="form-label">手机号</label>
        <input type="text" class="form-input" placeholder="请输入注册手机号" v-model="phone" />
      </view>
      <button class="submit-button" @click="getVerificationCode">获取验证码</button>
      <button class="back-button" @click="goBack">返回登录</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'ForgotPasswordPage',
  setup() {
    const phone = ref('');

    const getVerificationCode = () => {
      if (!phone.value) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });
    };

    const goBack = () => {
      uni.navigateBack();
    };

    return {
      phone,
      getVerificationCode,
      goBack
    };
  }
});
</script>

<style>
:root {
  --primary-color: #2196F3;
}

.container {
  padding: 30px 24px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.form-input {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 16px;
  transition: border 0.3s;
  outline: none;
}

.form-input:focus {
  border-color: var(--primary-color);
}

.submit-button {
  background-color: #2196F3;
  color: white;
  border: none;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.back-button {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  font-size: 16px;
}
</style> 